<template>
	<view class="home">

		<scroll-view scroll-x="true" class="scrollNav">
			<view class="item" :class="navIndex === index ? 'active' : ''" v-for="(item,index) in navArr" :key="item.id"
				@click="clickNav(index,item.id)">{{item.classname}}</view>

		</scroll-view>

		<view class="content">
			<view class="row" v-for="item in newsArr" :key="item.id">
				<newsbox @click.native="goDetail(item)" :item="item"></newsbox>
			</view>
		</view>
		<view class="nodata" v-if="!newsArr.length">
			<image src="../../static/images/nodata.png" mode="widthFix"></image>
		</view>

		<view class="loading" v-else>

			<view v-show="isLoading">
				数据加载中
			</view>
			<view v-if="isFinish">
				没有更多了
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navIndex: 0,
				navArr: [],
				newsArr: [],
				currentCid: 50,
				currentPage: 1,
				isLoading: false,
				isFinish: false
			}
		},
		onLoad() {
			this.getNavData()

			this.getNewsData()
		},
		// 页面触底调用
		onReachBottom() {
			console.log('顶到了');
			if (this.isFinish) return
			this.currentPage++
			this.isLoading = true
			this.getNewsData()
		},
		methods: {
			// 点击导航切换
			clickNav(index, cid) {
				this.navIndex = index
				this.currentCid = cid
				this.currentPage = 1
				this.newsArr = []
				this.isLoading = false
				this.isFinish = false
				this.getNewsData()
			},
			// 跳转到详情页
			goDetail(item) {

				uni.navigateTo({
					url: `/pages/detail/detail?cid=${item.classid}&id=${item.id}`
				})
			},
			// 获取导航列表数据
			getNavData() {
				uni.request({
					url: 'https://ku.qingnian8.com/dataApi/news/navlist.php',
					success: (res) => {
						this.navArr = res.data
					}
				})
			},
			// 获取新闻列表
			getNewsData() {
				uni.request({
					url: 'https://ku.qingnian8.com/dataApi/news/newslist.php',
					data: {
						cid: this.currentCid,
						page: this.currentPage

					},
					success: (res) => {

						this.isLoading = false
						if (res.data.length === 0) {
							this.isFinish = true
						}
						this.newsArr = [...this.newsArr, ...res.data]
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		.scrollNav {
			position: fixed;
			top: var(--window-top);
			left: 0;
			z-index: 10;
			height: 100rpx;
			background-color: #f7f8fa;
			white-space: nowrap;

			/deep/ ::-webkit-scrollbar {
				width: 4px !important;
				height: 1px !important;
				overflow: auto !important;
				background: transparent !important;
				-webkit-appearance: auto !important;
				display: block;
			}


			.item {
				display: inline-block;
				padding: 0 30rpx;
				line-height: 100rpx;
				font-size: 40rpx;
				color: #333;

				&.active {
					color: #31c27c;
				}
			}
		}

		.content {
			padding: 130rpx 30rpx 30rpx;

			.row {
				padding: 20rpx 0;
				border-bottom: 1px dashed #efefef;
			}
		}


		.nodata {
			display: flex;
			justify-content: center;

			image {
				width: 360rpx;
			}
		}

		.loading {

			text-align: center;
			font-size: 26rpx;
			color: #888;

			line-height: 2em;
		}
	}
</style>